<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">

    <div class="hero-full-wrapper">
       <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid">
       <div class="gutter-sizer"></div>
         <div class="grid-sizer"></div>

         <div v-masonry-tile class="grid-item" v-for="(item,index) in datalist">
           <img class="img-responsive" alt="" :src="'http://localhost:8000/static/upload/'+item.img">
           <Avatar :src="'http://localhost:8000/static/upload/'+item.img" :width='100' fit="fill" >

              </Avatar>
           <a :href="'http://localhost:8080/detail?id='+item.id" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>{{ item.title }}</h3>
                 <p>{{ item.desc }}</p>
               </div>
             </div>
           </a>
         </div>
       </div>
     </div>

      <div>

        <p>分页:{{ pagination }}</p>

        <p> <pagination v-model="pagination" @change="change"></pagination> </p>

      </div>
    </main>


  </div>

</template>



<script>

import mh from './mh.vue'
// 导入面包屑导航组件
// import bread from './bread.vue'

export default {
    data() {
        return {
            msg: "这是一个变量",
            datalist: [],
            pagination: {
                //当前页
                page: 1,
                //每页条数
                size: 1,
                // 总个数
                total: 0
            }
        }
    },
    components: {
        'mh': mh
    },
    mounted: function () {
        // 请求课程列表数据
        //使用箭头函数
        this.axios.get('http://localhost:8000/app01/clist/', {
            params:{
                page: this.pagination.page,
                size: this.pagination.size
            }
        }).then((result) => {
            // console.log(result)

            // console.log(result.data.total);
            //赋值
            this.datalist = result.data.data;
            this.pagination.total = result.data.total;
            console.log(result.data.data)

        });

    },
    methods: {
        // 分页触发方法
        change() {
            //使用箭头函数
            this.axios.get('http://localhost:8000/app01/clist/', {
                params: {
                    page: this.pagination.page,
                    size: this.pagination.size
                }}).then((result) => {

                //赋值
                this.datalist = result.data.data;
            });
        },
        changetest(index) {
            this.clicked = index;
        },
        getTarget() {
            return document.querySelector('.right-frame');
        },
    }
}


</script>

<style>



</style>
